<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

onLoad(() => {})

const favoritesList = ref([
  {
    name: '重庆医科大学',
    science: '文科',
    tag: '文学 新闻传播',
    icon: '',
    address: '重庆 重庆市',
    schoolClass: '公办',
    grade: '普通本科',
    type: '医药类',
  },
  {
    name: '重庆工商职业学院',
    science: '理科',
    tag: '工学 计算机类',
    icon: '',
    address: '重庆 重庆市',
    schoolClass: '公办',
    grade: '专科',
    type: '综合类',
  },
  {
    name: '重庆理工大学',
    science: '文科',
    tag: '文学 新闻传播',
    icon: '',
    address: '重庆 重庆市',
    schoolClass: '公办',
    grade: '普通本科',
    type: '综合类',
  },
])

const isPlaning = ref(false)

const toEnrollPlanDetail = (e) => {
  uni.navigateTo({
    url: '/pages/college/collegeDetail/collegeDetail?initPageId=1',
  })
}
</script>

<template>
  <gui-page
    ref="guipage"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="background-color: white"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">根据大学选科</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 120rpx" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gFixedTop>
      <!-- 分类导航 -->
    </template>
    <template #gBody>
      <view class="wh100p flex-column gui-relative favorites" style="flex: 1">
        <view class="w100p flex bgfff column-center gap18" style="padding: 10rpx 0; margin: 0 20rpx; height: 80rpx; box-sizing: border-box">
          <text style="font-size: 28rpx">重庆</text>

          <view class="h100p flex column-center relative" style="width: 50%; background-color: #fafafa; border-radius: 40rpx">
            <text class="gui-icons gui-block gui-color-gray gui-text" style="left: 5%; line-height: 28rpx; margin-left: 20rpx">
              &#xe604;
            </text>
            <input
              class="input-box wh100p flex column-center"
              placeholder="请输入量表名"
              placeholder-style="color:#787878;font-size:26rpx;"
              style="border: 0px; margin-left: 10rpx"
            />
          </view>
          <view class="flex-center" style="width: 25%; height: 100%">
            <button
              class="flex column-center gui-button"
              :plain="true"
              style="border-color: #4687fb !important; border-radius: 40rpx"
              type="default"
            >
              <text class="gui-button-text" style="color: #4687fb; padding: 0rpx 40rpx">搜索</text>
            </button>
          </view>
        </view>

        <view class="gui-relative gui-flex1">
          <scroll-view class="gui-absolute-full gui-flex1" scroll-y style="background-color: #f7f7f7">
            <view class="gap4 flex-column">
              <view
                v-for="(item, index) of [...favoritesList, ...favoritesList, ...favoritesList, ...favoritesList]"
                :key="index"
                class="favoriteItem flex-between column-center"
                @tap="toEnrollPlanDetail"
              >
                <view class="flex column-center gap12">
                  <img src="#" style="border-radius: 50%; border: #9e9e9e solid 1rpx; width: 70rpx; height: 70rpx" />
                  <view class="flex-column h100p flex-between gap8">
                    <text class="title" style="">{{ item.name }}</text>
                    <view class="flex" style="color: #939393; font-size: 24rpx">
                      <text class="subScience">{{ item.address }} | {{ item.schoolClass }}</text>
                    </view>
                    <view class="flex" style="color: #939393; font-size: 24rpx">
                      <text class="subScience">{{ item.grade }} | {{ item.type }}</text>
                    </view>
                  </view>
                </view>
                <view class="h100p flex-column flex-center column-center gap4" style="margin-right: 60rpx">
                  <text class="gui-icons gui-block gui-text" style="font-size: 34rpx; font-weight: 600" :style="`color:black`">40个</text>
                  <text class="gui-icons gui-block gui-text" style="font-size: 24rpx" :style="`color:rgb(172, 172, 172)`">开设专业</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.favoriteItem {
  height: 200rpx;
  padding: 25rpx 30rpx;
  box-sizing: border-box;
  background-color: white;
}

.favoriteItem .title {
}
</style>
